<template>
  <div class="parent-letter-root">
    <div class="nav">
      <router-link to="/parent/view-letter" active-class="nav-active">查看信件</router-link>
      <router-link to="/parent/chat" active-class="nav-active">对话沟通</router-link>
      <router-link to="/parent/more-features" active-class="nav-active">更多功能</router-link>
    </div>
    <div class="container">
      <h3 class="letter-title-main"><i class="fa fa-envelope-open"></i> 查看信件</h3>
      <div class="toolbar">
        <div class="search-box">
          <input type="text" v-model="search" placeholder="搜索信件...">
          <button @click="doSearch">搜索</button>
        </div>
        <select class="filter-select" v-model="filterStatus">
          <option value="all">全部信件</option>
          <option value="unread">未读信件</option>
          <option value="read">已读信件</option>
        </select>
        <select class="filter-select" v-model="sortOrder">
          <option value="newest">最新优先</option>
          <option value="oldest">最早优先</option>
        </select>
      </div>
      <div class="letters-container">
        <div v-for="(letter, idx) in filteredLetters" :key="idx" class="letter-item" :class="{unread:!letter.read}">
          <div class="letter-header" @click="toggleLetter(idx)">
            <div class="letter-header-info">
              <div class="letter-title" :class="{ unread: !letter.read }">
                <i class="fa fa-envelope" v-if="!letter.read"></i>
                <i class="fa fa-envelope-open" v-else></i>
                {{ letter.title }}
              </div>
              <div class="letter-sender">{{ letter.sender }}</div>
            </div>
            <div class="letter-date">{{ letter.date }}</div>
          </div>
          <transition name="fade">
            <div class="letter-content" v-show="letter.open">
              <p v-for="(line, i) in letter.content" :key="i">{{ line }}</p>
            </div>
          </transition>
          <div class="letter-actions">
            <button class="action-btn" @click="markAsRead(idx)" v-if="!letter.read">标记为已读</button>
          </div>
        </div>
      </div>
      <div class="pagination">
        <button :class="{active: page===1}" @click="page=1">1</button>
        <button :class="{active: page===2}" @click="page=2">2</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ParentViewLetter',
  data() {
    return {
      search: '',
      filterStatus: 'all',
      sortOrder: 'newest',
      page: 1,
      letters: [
        {
          title: '家长会通知',
          sender: '教务处',
          date: '2025-06-28',
          content: [
            '尊敬的家长：',
            '我校将于2025年7月5日（星期六）上午9:00召开家长会，请准时参加。',
            '会议内容：本学期学生成绩总结及下学期学习计划。',
            'XX中学教务处'
          ],
          read: false,
          open: false
        },
        {
          title: '暑期安全提醒',
          sender: '德育处',
          date: '2025-06-15',
          content: [
            '暑期将至，请家长和学生注意安全，防溺水、防诈骗、防交通事故。',
            '祝大家假期愉快！',
            'XX中学德育处'
          ],
          read: false,
          open: false
        }
      ]
    }
  },
  computed: {
    filteredLetters() {
      let arr = this.letters
      if (this.filterStatus === 'unread') arr = arr.filter(l => !l.read)
      if (this.filterStatus === 'read') arr = arr.filter(l => l.read)
      if (this.search) arr = arr.filter(l => l.title.includes(this.search) || l.sender.includes(this.search))
      if (this.sortOrder === 'newest') arr = arr.slice().sort((a, b) => b.date.localeCompare(a.date))
      if (this.sortOrder === 'oldest') arr = arr.slice().sort((a, b) => a.date.localeCompare(b.date))
      return arr
    }
  },
  methods: {
    toggleLetter(idx) {
      this.letters[idx].open = !this.letters[idx].open
    },
    markAsRead(idx) {
      this.letters[idx].read = true
    },
    doSearch() {
      // 这里只是触发过滤，实际已由v-model和computed实现
    }
  }
}
</script>
<style scoped>
.parent-letter-root {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
  padding-bottom: 40px;
}
.nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  background: #fff;
  border-radius: 12px;
  margin: 0 auto 18px auto;
  max-width: 900px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 10px 0;
}
.nav a {
  color: #4c51bf;
  font-weight: 500;
  font-size: 16px;
  padding: 6px 18px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.nav a:hover, .nav-active {
  background: #e6f4ff;
  color: #2563eb !important;
}
.container {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 32px 28px 24px 28px;
}
.letter-title-main {
  font-size: 22px;
  color: #2563eb;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.search-box { flex: 1; min-width: 200px; display: flex; }
.search-box input { flex: 1; padding: 10px 16px; border: 1.5px solid #c7d2fe; border-radius: 18px 0 0 18px; font-size: 15px; }
.search-box input:focus { border: 1.5px solid #2563eb; outline: none; }
.search-box button { padding: 10px 22px; background: linear-gradient(90deg, #2563eb 0%, #63b3ed 100%); color: #fff; border: none; border-radius: 0 18px 18px 0; cursor: pointer; font-size: 15px; transition: background 0.2s; }
.search-box button:hover { background: linear-gradient(90deg, #1e40af 0%, #3182ce 100%); }
.filter-select { padding: 10px 16px; border: 1.5px solid #c7d2fe; border-radius: 18px; font-size: 15px; }
.letters-container { margin-top: 10px; }
.letter-item {
  border: 1.5px solid #e0e7ff;
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
  transition: box-shadow 0.2s, border 0.2s;
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(99,179,237,0.08);
}
.letter-item.unread { border: 1.5px solid #2563eb; background: #e6f4ff; }
.letter-header {
  background-color: #f5f7fa;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #e0e7ff;
}
.letter-header-info { display: flex; flex-direction: column; gap: 4px; }
.letter-title { font-weight: bold; font-size: 17px; color: #2563eb; display: flex; align-items: center; gap: 8px; }
.letter-title.unread { color: #e53e3e; }
.letter-title.unread i { color: #e53e3e; }
.letter-title i { font-size: 16px; }
.letter-date { color: #666; font-size: 14px; }
.letter-sender { color: #4c51bf; font-size: 14px; }
.fade-enter-active, .fade-leave-active { transition: all 0.3s; }
.fade-enter, .fade-leave-to { opacity: 0; transform: translateY(-10px); }
.letter-content { padding: 18px 24px; background-color: #fff; font-size: 15px; color: #333; }
.letter-actions { padding: 10px 20px; background-color: #f9f9f9; display: flex; justify-content: flex-end; gap: 10px; }
.action-btn { padding: 7px 18px; border: none; border-radius: 18px; background: linear-gradient(90deg, #2563eb 0%, #63b3ed 100%); color: #fff; cursor: pointer; font-size: 15px; transition: background 0.2s; }
.action-btn:hover { background: linear-gradient(90deg, #1e40af 0%, #3182ce 100%); }
.pagination { display: flex; justify-content: center; margin-top: 20px; gap: 8px; }
.pagination button { padding: 8px 16px; border: none; border-radius: 16px; background: #e6f4ff; color: #2563eb; cursor: pointer; font-size: 15px; transition: background 0.2s, color 0.2s; }
.pagination button.active { background: #2563eb; color: #fff; }
.pagination button:hover:not(.active) { background: #c7d2fe; color: #2563eb; }
@media (max-width: 1000px) {
  .container, .nav { max-width: 100vw; }
  .container { border-radius: 0; }
}
@media (max-width: 700px) {
  .container { padding: 12px 2vw 12px 2vw; }
  .letter-header { flex-direction: column; align-items: flex-start; gap: 6px; }
}
</style> 